<template>
  <div class="content">
    <!-- 输入框 -->
    <van-field class="inp sub" v-model="tel" label="+86" type="tel" placeholder="请输入手机号"/>
    <!-- 提交按钮 -->
    <van-button round type="info" class="sub" color="#f2270c" @click="submitTel" :disabled="!flag">确定注册</van-button>
    <!-- 用户协议勾选框 -->
    <van-checkbox class="user" icon-size="14px" checked-color="#cccccc" v-model="checked">
      <span class="userAgreement">同意用户协议</span>
    </van-checkbox>
  </div>
</template>

<script>
import Vue from 'vue'
import { Field, Button, Checkbox, CheckboxGroup, Dialog } from 'vant'
import { getRegisterData } from '@/api/user'

Vue.use(Field)
Vue.use(Button)
Vue.use(Checkbox)
Vue.use(Dialog)
Vue.use(CheckboxGroup)
export default {
  data () {
    return {
      tel: '',
      checked: false,
      show: false
    }
  },
  computed: {
    flag () {
      return /\d{11}/.test(this.tel)
    }
  },
  mounted () {
    Dialog.confirm({
      title: '注册协议及隐私政策',
      message: '在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议， 请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：《京东用户注册协议》《京东隐私政策》《订单共享与安全》【请您注意】如果您不同意上述协议或其中任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息、阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容；并表明您也同意京东可以依据以上的隐私政策内容来处理您的个人信息。点击同意即表示您已阅读并同意 ',
      confirmButtonText: '同意',
      cancelButtonText: '不同意'
    })
      .then(() => {
        this.checked = true
      })
      .catch(() => {
        this.$router.back()
      })
  },
  methods: {
    submitTel () {
      // 是否勾选了用户协议 如果没有那么提示确定即为勾选
      // 在判断用户是否存在 若存在弹出已存在是否直接登录
      if (this.checked) {
        getRegisterData(this.tel)
          .then(res => {
            console.log(res)
            if (res.code === '200') {
              Dialog.confirm({
                title: '温馨提示',
                message: '我们将发送短信至' + this.tel
              })
                .then(() => {
                  localStorage.setItem('tel', this.tel)
                  this.$router.push('/register/register2')
                })
            } else {
              Dialog.confirm({
                title: '温馨提示',
                message: this.tel + '已经被占用<br>请确定是否为您所有',
                confirmButtonText: '继续注册',
                cancelButtonText: '是我的，直接登录'
              })
                .then(() => {
                  localStorage.setItem('tel', this.tel)
                  this.$router.push('/register/register2')
                })
                .catch(() => {
                  this.$router.back()
                })
            }
          })
      } else {
        Dialog.confirm({
          title: '温馨提示',
          message: '请勾选用户协议，点击确认自动勾选',
          confirmButtonText: '同意并继续'
        })
          .then(() => {
            this.checked = true
            this.submitTel()
          })
      }
    }
  }
}
</script>

<style lang='stylus' scoped>
body
  background-color white
html
  font-size 20px
.content
  text-align center
  display flex
  flex-direction column
  align-items center
.user
  font-size 12px
  color #ddd
  position absolute
  bottom .5rem
  left 50%
  transform translateX(-50%)
.userAgreement
  color #ddd
.inp
  border-bottom 1px solid #eeeeee
  margin-bottom 4rem
.sub
  width 90%
</style>
